import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/viewmodel/surveillance_view_model.dart';
import 'package:syn_4s/ui/widgets/custom_ui.dart';
import 'package:syn_4s/ui/widgets/shadow_container.dart';
import 'package:syn_4s/ui/widgets/surveillance_item.dart';
import '../../../generated/l10n.dart';
import '../../shared/app_theme.dart';
import '../../widgets/main_drawer.dart';

class SurveillanceContent extends StatefulWidget {
  const SurveillanceContent({super.key});

  @override
  State<SurveillanceContent> createState() => _SurveillanceContentState();
}

class _SurveillanceContentState extends State<SurveillanceContent> {
  final SurveillanceViewModel viewModel = Get.find<SurveillanceViewModel>();
  final RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  @override
  void initState() {
    super.initState();
    viewModel.getCCTV(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const MainDrawer(),
      backgroundColor: AppTheme.appBarEndColor,
      appBar: getAppBar(context.l10n.surveillance),
      body: buildContent(),
    );
  }

  Widget buildContent() {
    return Column(
      children: [
        buildSelectBox(),
        buildSortBox(),
        buildTopLine(),
        buildSurveillanceList(),
        buildSelectPage(),
      ],
    );
  }

  Widget buildSelectBox() {
    GlobalKey globalKey = GlobalKey();
    return Container(
      margin: EdgeInsets.only(left: 10.px, right: 10.px, bottom: 10.px),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "${context.l10n.device_name}",
            style: TextStyle(color: Colors.white, fontSize: 13.px),
          ),
          SizedBox(width: 4.px),
          Expanded(
              child: InkWell(
                onTap: (){
                  viewModel.getDevices(context, globalKey);
                },
                child: Container(
                  key: globalKey,
                  padding: EdgeInsets.only(top: 2.px, bottom: 2.px, left: 8.px),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.all(Radius.circular(50.px)),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        context.l10n.p_select,
                        style: TextStyle(
                            fontSize: 13.px, color: AppTheme.infoTextColors),
                      ),
                      SizedBox(
                        width: 14.px,
                      ),
                      Icon(Icons.arrow_drop_down)
                    ],
                  ),
                ),
              )
          )
        ],
      ),
    );
  }

  Widget buildSortBox() {
    return Container(
      margin: EdgeInsets.only(left: 10.px, right: 10.px),
      child: InkWell(
        onTap: ()=> viewModel.changSort(context),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.only(top: 2.px, bottom: 2.px, left: 8.px),
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(50.px)),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        SvgPicture.asset("assets/images/icon_sort.svg", width: 14.px, height: 14.px),
                        SizedBox(width: 2.px),
                        Text(
                          context.l10n.sort_device_name,
                          style: TextStyle(
                              fontSize: 13.px, color: AppTheme.infoTextColors),
                        )
                      ],
                    ),
                    SizedBox(
                      width: 14.px,
                    ),
                    Obx((){
                      return Icon(viewModel.sort == true ? Icons.arrow_drop_up : Icons.arrow_drop_down);
                    })
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildSelectPage() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Obx((){
          return IconButton(
              onPressed: ()=> viewModel.currentPage.value > 1 ? viewModel.prevPage(context) : null,
              icon: Icon(Icons.navigate_before, color: viewModel.currentPage.value > 1 ? Colors.white : Colors.black26)
          );
        }),
        Obx((){
          return Text("${S.of(context).current_page(viewModel.currentPage.value.toString())}", style: TextStyle(color: Colors.white, fontSize: 16.px));
        }),
        Obx((){
          return IconButton(
              onPressed: ()=> viewModel.currentPage.value < viewModel.totalPages.value ? viewModel.nextPage(context) : null,
              icon: Icon(Icons.navigate_next, color: viewModel.currentPage.value < viewModel.totalPages.value ? Colors.white : Colors.black26)
          );
        })
      ],
    );
  }

  Widget buildTopLine() {
    return Container(
      height: 1.px,
      width: double.infinity,
      color: Colors.white,
      margin: EdgeInsets.only(left: 10.px, right: 10.px, top: 2.px, bottom: 10.px),
    );
  }

  Widget buildSurveillanceList() {
    return Expanded(
      child: ShadowContainer(
        padding: EdgeInsets.all(10.px),
        margin: EdgeInsets.only(left: 10.px, right: 10.px),
        child: Obx((){
          return SmartRefresher(
              onRefresh: () {
                viewModel.getCCTV(context);
                _refreshController.refreshCompleted();
              },
              enablePullDown: true,
              header: ClassicHeader(),
              controller: _refreshController,
              child: ListView.separated(
                itemCount: viewModel.items.length,
                itemBuilder: (ctx, index) {
                  return SurveillanceItem(viewModel.items[index]);
                },
                separatorBuilder: (ctx, index) => SizedBox(height: 10.px),
              )
          );
        }),
      ),
    );
  }

  @override
  void dispose() {
    viewModel.currentPage.value = 1;
    viewModel.sort.value = true;
    super.dispose();
  }
}
